<template>
  <view class="container">
    <view class="header">
      <UniNavBar :title="title" />
      <view class="map dis-flex flex-dir-row flex-y-center flex-x-start">
        <image class="map_img" :src="map"></image>
        <p>浙江省杭州市西湖区包图小区1号楼101室</p>
      </view>
    </view>
    <view class="u-content">
      <view class="payment">当前本月待缴 <text>230</text>元</view>
      <view class="items">
        <view class="item" v-for="(item,index) in list" :class="{cur:currentPay==index}" @click="selPay(index)" :key="index">
          <view class="t1">{{item.price}}</view>
          <view class="t2">{{item.time}}</view>
        </view>
        <view class="item" @click="()=>priceShow = true">
          <view class="t3">自定义金额</view>
        </view>
      </view>
      <view class="dis-flex agreement"><u-checkbox-group><u-checkbox v-model="checked" activeColor="#6750F8" shape="circle"></u-checkbox></u-checkbox-group>我已阅读<text>《预缴充值协议》</text></view>
    </view>

    <view class="ubtn">
        <u-button type="primary" text="确认预缴" @click="makeSure"></u-button>
    </view>
    <view class="dis-flex flex-x-center foot">
      <view>联系客服</view>
      <view class="line">|</view>
      <view>帮助中心</view>
    </view>
    <u-modal :show="priceShow" width="300px" :closeOnClickOverlay="true" showCancelButton confirmColor="#6750F8" @cancel="cancelBtn" @close="cancelBtn" @confirm="cancelBtn">
      <view class="slot-content">
				<u-input placeholder="请输入金额" type="number"  prefixIcon="rmb" v-model="price"></u-input>
			</view>
    </u-modal>
  </view>
</template>

<script>
import map from '@/static/images/map.png'
import UniNavBar from "@/components/uniNavbar/index.vue"
export default {
  name:'toPay',
  components:{UniNavBar},
  data() {
    return {
      map,
      title:'缴费预缴',
      list:[
        {price:'230元',time:'本月'},
        {price:'460元',time:'2个月'},
        {price:'690元',time:'3个月'},
        {price:'1380元',time:'6个月'},
        {price:'2760元',time:'12个月'},
      ],
      checked:false,
      priceShow:false,
      price:'',
      currentPay:-1,
    }
  },
  onLoad(options) {
    if (options && options.type) {
      this.current = options.type 
    }
  },
  methods:{
    makeSure() {
      console.log('666')
      this.priceShow = false
    },
    selPay(index) {
      this.currentPay = index
    },
    cancelBtn() {
      this.priceShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width:100vw;
    height: 100vh;
    position: relative;
    .header {
      width:100vw;
      height: 424rpx;
      background:$uni-bg-color;
      padding:0 20rpx;
      border-radius: 0 0 20rpx 20rpx;
      .map {
        margin:30rpx 0 0;
        .map_img {
          width:23rpx;
          height: 28rpx;
        }
        p {
          font-size: 28rpx;
          font-weight: 400;
          color: #FFFFFF;
          margin-left: 20rpx;
        }
      }
    }
    .u-content {
      width: 710rpx;
      height: 532rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding:40rpx 30rpx;
      margin:-200rpx auto 0;
      .payment {
        color: #AAAEC1;
        text {
          color: $uni-bg-color;
          font-weight: 600;
          font-size: 40rpx;
        }
      }
      .items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
          width: 200rpx;
          height: 140rpx;
          background: #F3F6FF;
          border-radius: 8rpx;
          margin-top: 30rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .t1 {
            font-size: 36rpx;
            color: $uni-bg-color;
          }
          .t2 {
            font-size: 28rpx;
            color: #AAAEC1;
          }
          .t3 {
            font-size: 28rpx;
            color: $uni-bg-color;
          }
          &.cur {
            background:$uni-bg-color;
            .t1,.t2,.t3 {
              color:#fff;
            }
          }
        }
      }
      .agreement {
        margin-top: 40rpx;
        text {
          color: $uni-bg-color;
        }
      }
    }
    .ubtn {
      width:680rpx;
      margin: 80rpx auto 0;
    }
    .foot {
      color: $uni-bg-color;
      position: absolute;
      left:0;
      bottom: 40rpx;
      width:100%;
      .line {
        display: inline-block;
        margin: 0 20rpx;
        color: #666;
      }
    }
  }
</style>